<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>login</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
      form {
        width: 400px;
        padding: 20px;
        margin: 200px auto;
        border: 1px solid #eee;
      }
      label {
        display: inline-block;
        width: 80px;
        margin-right: 10px;
        text-align: right;
      }
      input {
        width: 200px;
      }
      button {
        background: none;
        padding: 3px 20px;
        border: 1px solid #eee;
        outline: none;
        display: block;
        margin: 20px auto;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="app">
      <form action="">
        <p><label for="">用户名</label><input v-model="username"></p>
        <p><label for="">密码</label><input v-model="password"></p>
        <button @click.prevent="login">登陆</button>
      </form>
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
      el: '.app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        login () {
          axios({
            method: 'post',
            url: 'http://localhost:1000/loginIn',
            data: {
              user_name: this.username,
              password: this.password
            }
          }).then(data => {
            if (data.data.code === 8200) {
            window.location.href=data.data.data;
            }
          })
          .catch((err) => {
            console.log(err)
          })
        }
      }
    })
  </script>
</html>
